<template>
  <div class="recommend">
    <!--引入scroll滚动组件 :data通过属性触发watch()进行滚动刷新  -->
    <scroll ref="scroll" class="recommend-content" :data="disList">
      <!--当有异步数据返回时,执行slider组件中的mounted方法进行dom渲染 -->
       <!--轮播组件slider 组件中使用slot插槽引入dom -->
       <!-- <div v-if="recommends.length" class="slider-wrapper">
        <slider>
          <div v-for="(item,index) in recommends" :key="index">
          <a :href="item.linkUrl">
            <img :src="item.picUrl" />
          </a>
          </div>
        </slider>
       </div> -->
       <!--使用空的div将轮播与列表包裹起来，方便使用scroll组件进行滚动 -->
        <div>
        <div v-if="recommends.length" class="slider-wrapper">
        <swiper :options="swiperOption"  ref="mySwiper">
        <swiper-slide v-for="(item,index) in recommends" :key="index" >
          <a :href="item.linkUrl">
            <!--无法确定图片的具体高度，公共@load进行监听事件 -->
            <img :src="item.picUrl"  @load="loadImg"/>
          </a>
        </swiper-slide>
        <!--插槽slot引入小圆点 -->
        <p class="swiper-pagination" slot="pagination"></p>
        </swiper>
        </div>
        <!--列表数据 -->
        <div class="recommend-list">
        <h1 class="title">热门歌单推荐</h1>
        <ul class="dislist-wrapper">
          <li v-show="disList.length" v-for="(item,index) in disList" :key="index" class="dislist-item">
            <div class="icno">
              <img  v-lazy="item.imgurl" width="60" height="60" />
            </div>
            <div class="text">
              <h2 class="name">{{item.creator.name}}</h2>
              <div class="des">{{item.dissname}}</div>
            </div>
          </li>
        </ul>
        </div>
      </div>
      <!--loading加载页面 -->
      <div class="loading-container" v-show="!disList.length">
        <loading></loading>
      </div>
    </scroll>
  </div>  
</template>
<script>
import {getRecommend,getDisList} from '@/api/recommend.js';
import {common} from '@/util/common.js';
import slider from '@/components/base/slider/slider.vue';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import scroll from '@/components/base/scroll/scroll.vue';
import loading from '@/components/base/loading/loading.vue';

export default {
  data() {
    return {
      recommends: [],
      disList:[],
      // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
      swiperOption: {
        notNextTick: true,
        //设定初始化时slide的索引
        initialSlide:0,
        autoplay: true, // 自动轮播autoplay:true与swiper中方法slideTo(0, 0, false)不能同时设置，自动轮播会失效
        speed: 400,
        loop:true,//无缝轮播
        observer:true,        
        observeParents: true,
        //分页器设置         
        pagination: {
              el: '.swiper-pagination',
              clickable :true
        },
        // paginationClickable: true,// 小点点可以点击
        autoplayDisableOnInteraction: false //触摸后不会停止自动播放
      }
    };
  },
  components: {
    slider,
    swiper,
    swiperSlide,
    scroll,
    loading
  },
  created() {
    //使用setTimeout进行延迟测试效果
    setTimeout(() => {
      this._getRecommend(); // 获取轮播
      this._getDisList();// 歌单列表 
    }, 0);
    
    //由于无法确保getRecomm() or getDislist()的先后执行顺序，从而使scroll滚动的高度不完整,采用loadImg() 的解决方案
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    _getRecommend() {
      //异步返回是promise对象
      getRecommend().then((res) => {
        console.log('common.resutl.SUCC_OK的引入值： ' +  common.SUCC_OK);
        if (res.code === common.SUCC_OK) {
            this.recommends = res.data.slider;
        }
      });
    },
    _getDisList() {
      getDisList().then((res) => {
        if(res.code === common.SUCC_OK) {
          this.disList = res.data.list;
        }
      });
    },
    loadImg() {
      //执行一次的技巧
      if (!this.checkloaded) {
        this.checkloaded = true;
        this.$refs.scroll.refresh();
      }
    }
  },
  mounted() {
    //可以使用swiper这个对象去使用swiper官网中的那些方法  
     console.log('this is current swiper instance object');
    //this.swiper.slideTo(1, 1000, false)
  }
};
</script>
<style lang="scss" rel="stylesheet/scss">
  @import "@/assets/style/mixin.scss";
.recommend {
  position: fixed;
  top:88px;
  width: 100%;
  bottom: 0;
  .recommend-content {
    height: 100%;
    overflow: hidden;
    .slider-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
      a {
        display: block;
        width: 100%;
        overflow: hidden;
        text-decoration: none;
      }
      img {
        display: block;
        width: 100%;
      }
      .swiper-pagination {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 12px;
        text-align: center;
        font-size: 0;//去掉span与span直接的空占位符
        .swiper-pagination-bullet-active {
          background: rgba(240, 20, 20, 0.8);
        }
      }
    }
    .recommend-list {
      .title {
        text-align: center;
        margin:6px 0;
        line-height: 32px;
        font-size: 14px;
        color: #ffcd32;
        background-color: #f01414;
      }
    .dislist-wrapper {
      padding: 6px;
      font: 0px;
      .dislist-item {
        display: flex;
        padding: 6px;
        @include border-1px(rgba(7, 17, 27, 0.1)); //设置1像素
        &:last-child {
           @include border-none;
        }
        .icno {
          flex: 0 0 60px;
          margin-right: 6px;
          img {
            border-radius: 2px;
          }
        }
        .text {
          flex: 1;
          .name {
            margin: 2px 0 8px 0;
            font-size: 14px;
            width: 160px;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .des {
            margin-bottom: 6px;
            line-height: 14px;
            font-size: 10px;
            color: rgb(147, 153, 159);
            overflow: hidden;
            -webkit-line-clamp: 2;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
   }
   .loading-container {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>